import React, { useState, useRef, useEffect, useImperativeHandle } from 'react';
import { Progress, message } from 'antd';
import videoBg from '../images/video.png';
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import styles from './index.less';
import { isImg, isVideo, uid } from '@/utils';
import type { InnterUploadProps } from './BaseUpload';
import InnerUpload from './BaseUpload';
import classNames from 'classnames';
import { allGet } from '@/services/pc';

type PlvVideoListModalUploadProps = {
  max?: number;
  size?: number;
  onChange?: (fileList: any[]) => void;
  value?: any[];
  payload?: {};
  action: string;
  name?: string;
  getAliyunAuth?: () => Promise<any>;
  refreshAliyunAuth?: () => Promise<any>;
  onSuccess?: (fileList, file) => void;
  onPreview?: (file) => void;
  onRemove?: (file) => void;
} & Partial<Pick<InnterUploadProps, 'videoUploadto' | 'getPlvAuth' | 'refreshPlvAuth'>>;

const PlvVideoListModalUpload = React.forwardRef(
  (
    {
      size = 50,
      max = 30,
      onChange,
      value = [],
      payload = {},
      action,
      name = 'file',
      onSuccess,
      onPreview,
      onRemove,
      videoUploadto = 'Plv',
      getPlvAuth,
      refreshPlvAuth,
      children,
    },
    ref,
  ) => {
    const [collapsed, setCollapsed] = useState(false);
    const fileListCount = useRef(0);
    const [fileList, setFlieList] = useState<any[]>(value);

    const beforeUpload = async (file) => {
      const isvideo = isVideo(file.name);
      // 格式不符合
      if (!isvideo) {
        message.error(' 视频仅支持 avi/mp4/mov 格式');
        return false;
      }

      // 数量超出
      if (fileListCount.current >= max) {
        message.error(`最多上传 ${max} 个文件`);
        return false;
      }
      file.key = file?.uid || uid();
      fileListCount.current++;
      return file;
    };

    const getExtraData = (file) => {
      return payload;
    };

    const handleUploadChange = async (fileList) => {
      console.log(fileList, '2');
      setFlieList([...fileList]);
      // onChange?.(fileList)
    };

    const handleSuccess = async (fileList, file) => {
      onSuccess?.(fileList, file);
    };

    const upLoadProps = {
      fileList,
      onChange: handleUploadChange,
      name,
      action,
      data: getExtraData,
      beforeUpload: beforeUpload,
      onSuccess: handleSuccess,
      videoUploadto,
      getPlvAuth,
      refreshPlvAuth,
    };
    const handlePreview = (item) => {
      onPreview?.(item);
    };
    const UploadRef = useRef<any>();
    const handleStop = (item) => {
      UploadRef.current?.stopFile?.(item);
    };

    const handleResumeFile = (item) => {
      UploadRef.current?.resumeFile?.(item);
    };

    const handleRemoveFile = (item) => {
      UploadRef.current?.removeFile?.(item);
      fileListCount.current--;
    };

    const renderFileList = () => {
      return fileList.map((item) => {
        return (
          <div
            key={item.uuid}
            className={classNames(styles.item, {
              [styles.stop]: item.status === 'stop',
              [styles.done]: item.status === 'done',
              [styles.error]: item.status === 'error',
            })}
          >
            <i className={styles.icon} />
            <div className={styles.main}>
              <div className={styles.info}>
                <div className={styles.title}>{item.name}</div>
                <div className={styles.right}>
                  <div className={styles.status}>
                    {item.status === 'stop' && '已暂停'}
                    {item.status === 'done' && '上传成功'}
                    {item.status === 'uploading' && (item.percent || 0) + '%'}
                    {item.status === 'error' && '上传失败'}
                  </div>
                  {item.status === 'uploading' && (
                    <i
                      className={classNames(styles.handle, styles.stop)}
                      onClick={() => handleStop(item)}
                    />
                  )}
                  {item.status === 'stop' && (
                    <i
                      className={classNames(styles.handle, styles.start)}
                      onClick={() => handleResumeFile(item)}
                    />
                  )}
                  <i
                    className={classNames(styles.handle, styles.delete)}
                    onClick={() => handleRemoveFile(item)}
                  />
                </div>
              </div>
              <div className={styles.process}>
                <i className={styles.inner} style={{ width: item.percent + '%' }} />
              </div>
            </div>
          </div>
        );
      });
    };
    const successNum = fileList.filter((item) => item.status === 'done').length;
    const title = () => {
      if (fileList.length === 0) {
        return '选择文件上传';
      }
      if (fileList.length > 0 && successNum === fileList.length) {
        return '上传完毕';
      }
      return '上传视频中...';
    };
    const openSelect = (params) => {
      UploadRef.current?.openSelect?.(params);
    };
    /**
     * 供父组件调用
     */
    useImperativeHandle(ref, () => ({
      openSelect,
    }));
    return (
      <div>
        <InnerUpload
          ref={UploadRef}
          className={styles.drag}
          {...upLoadProps}
          payload={payload}
          multiple
        >
          {children}
        </InnerUpload>
        {fileList.length > 0 && (
          <div className={styles.modelWrapper}>
            <div className={styles.header}>
              {title()}
              <div className={styles.step}>
                ({successNum}/{fileList.length})
              </div>
              <i
                className={classNames(styles.collapsible, { [styles.collapsed]: collapsed })}
                onClick={() => setCollapsed(!collapsed)}
              />
            </div>
            <div className={classNames(styles.body, { [styles.collapsed]: collapsed })}>
              {renderFileList()}
            </div>
          </div>
        )}
      </div>
    );
  },
);

export default PlvVideoListModalUpload;
